<template>
  <view class="work-container">
    <!-- 商户角色专属界面 -->
    <view >
      <!-- 顶部标题 -->
      <view class="merchant-header">
        <view class="header-title">
          <text class="title-main">法规中心</text>
          <text class="title-sub">了解最新政策法规与市场公告</text>
        </view>
      </view>
      
      <!-- 轮播图 -->
      <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
        <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
          <swiper-item v-for="(item, index) in data" :key="index">
            <view class="swiper-item" @click="clickBannerItem(item)">
              <image :src="item.image" mode="aspectFill" :draggable="false" />
            </view>
          </swiper-item>
        </swiper>
      </uni-swiper-dot>
      
      <!-- 政策法规板块 -->
      <view class="regulation-section">
        <view class="section-header">
          <view class="section-title">
            <uni-icons type="flag" size="20" color="#1890ff"></uni-icons>
            <text>政策法规</text>
          </view>
          <view class="section-more" @click="goToRegulations">
            <text>更多</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="regulation-list">
          <view v-for="(item, index) in regulationList" :key="index" class="regulation-item" @click="viewRegulation(item)">
            <view class="regulation-content">
              <text class="regulation-title">{{ item.title }}</text>
              <text class="regulation-date">{{ item.publishDate }}</text>
            </view>
            <uni-icons type="right" size="16" color="#ccc"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 市场公告板块 -->
      <view class="notice-section">
        <view class="section-header">
          <view class="section-title">
            <uni-icons type="sound" size="20" color="#faad14"></uni-icons>
            <text>市场公告</text>
          </view>
          <view class="section-more" @click="goToNoticeList">
            <text>更多</text>
            <uni-icons type="right" size="14" color="#999"></uni-icons>
          </view>
        </view>
        <view class="notice-list">
          <view v-for="(item, index) in noticeList" :key="index" class="notice-item" @click="viewNotice(item)">
            <view class="notice-tag" v-if="item.isNew">NEW</view>
            <view class="notice-content">
              <text class="notice-title">{{ item.title }}</text>
              <text class="notice-time">{{ item.createTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 自定义tabbar -->
    <custom-tabbar :current="1" />
  </view>
</template>

<script>
  import { getActiveBannerList, clickBanner } from '@/api/business/banner.js'
  import { getActiveModules } from '@/api/system/appmodule.js'
  import storage from '@/utils/storage'
  import constant from '@/utils/constant'
  import CustomTabbar from '@/components/custom-tabbar/custom-tabbar'
  
  export default {
    components: {
      CustomTabbar
    },
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
        data: [],
        userRoles: [], // 用户角色
        menuConfig: [], // 菜单配置
        visibleMenus: [], // 可见菜单
        regulationList: [], // 政策法规列表
        noticeList: [] // 公告列表
      }
    },
    computed: {
      // 检查是否有指定角色
      hasRole() {
        return (roleKey) => {
          return this.userRoles.includes(roleKey)
        }
      },
      // 是否是商户角色
      isMerchantRole() {
        return this.userRoles.includes('merchant')
      },
      // 是否是管理员
      isAdmin() {
        return this.hasRole('admin') || this.hasRole('market_safety_officer')
      }
    },
    onLoad() {
	  this.loadBanners()
      this.setPageTitle()
      this.loadRegulations()
      this.loadNotices()
    },
    onShow() {
      // 隐藏原生tabBar
      uni.hideTabBar()
    },
    methods: {
      // 加载轮播图
      async loadBanners() {
        try {
          const response = await getActiveBannerList()
          if (response.code === 200) {
            this.data = response.data || []
            // 如果没有轮播图，不显示默认图片，保持空白
            if (this.data.length === 0) {
              this.data = []
            } else {
              // 转换数据格式以适配原有的轮播组件
              this.data = this.data.map(item => ({
                ...item,
                image: item.imageUrl, // 兼容原有的image字段
                content: item.title
              }))
            }
          }
        } catch (error) {
          console.error('加载轮播图失败:', error)
          // 失败时也不显示默认图片，保持空数组
          this.data = []
        }
      },
      
      // 加载用户角色
      loadUserRoles() {
        const roles = storage.get(constant.roles) || []
        this.userRoles = roles.map(role => {
          // 处理角色数据，可能是对象或字符串
          if (typeof role === 'object' && role.roleKey) {
            return role.roleKey
          }
          return role
        })
        console.log('当前用户角色:', this.userRoles)
      },
      
      // 加载动态模块配置
      async loadDynamicModules() {
        try {
          const response = await getActiveModules()
          if (response.code === 200 && response.data) {
            // 将后台配置转换为前端菜单格式
            const dynamicMenus = response.data.filter(module => module.moduleType === '0').map(module => ({
              key: module.moduleKey,
              name: module.moduleName,
              icon: module.moduleIcon,
              color: module.moduleColor,
              path: module.pagePath,
              sortOrder: module.sortOrder,
              roles: this.getModuleRolesByKey(module.moduleKey), // 根据模块类型分配角色权限
              action: this.getActionByKey(module.moduleKey)
            }))
            
            // 合并动态菜单配置
            this.menuConfig = dynamicMenus
            this.updateVisibleMenus()
          } else {
            // 如果获取失败，使用默认配置
            this.initMenuConfig()
          }
        } catch (error) {
          console.error('加载动态模块失败:', error)
          // 出错时使用默认配置
          this.initMenuConfig()
        }
      },
      
      // 根据模块key分配角色权限
      getModuleRolesByKey(key) {
        const roleMap = {
          // 商户专用功能（管理员也可以访问）
          'supplier': ['merchant', 'admin'],
          'merchant': ['admin', 'market_supervisor'], // 只有管理员可以管理商户
          'goods': ['merchant', 'admin'], 
          'appointment': ['all'], // 所有角色都可以查看预约
          
          // 只有市场食品安全员可以审核
          'audit': ['market_safety_officer'],
          
          // 查验相关功能
          'check': ['entry_checker', 'inspector', 'market_safety_officer'], 
          'quicktest': ['inspector'], // 只有抽验员可以做快速检测
          
          // 文件管理功能
          'file': ['admin', 'merchant'],
          'image': ['admin', 'merchant'],
          
          // 统计功能
          'statistics': ['admin', 'market_supervisor', 'food_safety_director', 'food_safety_chief']
        }
        
        return roleMap[key] || ['admin'] // 默认只有管理员可见
      },
      
      // 根据模块key获取对应的action
      getActionByKey(key) {
        const actionMap = {
          'supplier': 'goToSupplier',
          'merchant': 'goToMerchant',
          'goods': 'goToGoods',
          'appointment': 'goToAppointment',
          'audit': 'goToAudit',
          'check': 'handleScan',
          'file': 'goToFileManage',
          'image': 'goToImageManage',
          'quicktest': 'goToQuickTest',
          'statistics': 'goToStatistics'
        }
        return actionMap[key] || null
      },
      
      // 初始化菜单配置（默认配置）
      initMenuConfig() {
        // 定义所有可能的菜单
        // 根据数据库中的角色定义进行配置
        const allMenus = [
          {
            key: 'appointment',
            name: '预约申请',
            icon: 'calendar',
            color: '#007AFF',
            roles: ['merchant'], // 入场销售者可见
            action: 'goToAppointment'
          },
          {
            key: 'scan',
            name: '扫码查验',
            icon: 'scan',
            color: '#52C41A',
            roles: ['entry_checker', 'market_safety_officer'], // 入场核验人员/市场食品安全员可见（移除抽验人员）
            action: 'handleScan'
          },
          {
            key: 'records',
            name: '预约记录',
            icon: 'list',
            color: '#FF9500',
            roles: ['all'], // 所有角色可见
            action: 'goToRecords'
          },
          {
            key: 'supplier',
            name: '供货商管理',
            icon: 'shop',
            color: '#722ED1',
            roles: ['merchant', 'admin'], // 入场销售者和管理员可见
            action: 'goToSupplier'
          },
          {
            key: 'goods',
            name: '商品管理',
            icon: 'cart',
            color: '#13C2C2',
            roles: ['merchant', 'admin'], // 入场销售者和管理员可见
            action: 'goToGoods'
          },
          {
            key: 'audit',
            name: '预约审核',
            icon: 'checkbox',
            color: '#FA541C',
            roles: ['market_safety_officer'], // 只有市场食品安全员可见
            action: 'goToAudit'
          },
          {
            key: 'inspection',
            name: '抽检任务',
            icon: 'eye',
            color: '#FAAD14',
            roles: ['inspector'], // 抽验人员可见
            action: 'goToInspection'
          },
          {
            key: 'statistics',
            name: '数据统计',
            icon: 'bars',
            color: '#FA8C16',
            roles: ['admin', 'market_supervisor', 'food_safety_chief', 'market_safety_officer'], // 超管/市场监管局/食品安全总监/市场食品安全员可见
            action: 'goToStatistics'
          },
          {
            key: 'notice',
            name: '公告管理',
            icon: 'sound',
            color: '#1890FF',
            roles: ['admin', 'market_safety_officer'], // 超管/市场食品安全员可见
            action: 'goToNotice'
          },
          {
            key: 'merchant',
            name: '商户管理',
            icon: 'shop-filled',
            color: '#9254DE',
            roles: ['admin', 'market_safety_officer'], // 超管/市场食品安全员可见
            action: 'goToMerchant'
          },
          {
            key: 'check_records',
            name: '查验记录',
            icon: 'compose',
            color: '#52C41A',
            roles: ['entry_checker', 'inspector', 'market_safety_officer', 'admin'], // 入场核验人员/抽验人员/市场食品安全员/超管可见
            action: 'goToCheckRecords'
          },
          {
            key: 'quick_test',
            name: '检测录入',
            icon: 'compose',
            color: '#F5222D',
            roles: ['inspector', 'market_safety_officer'], // 抽验人员/市场食品安全员可见
            action: 'goToQuickTest'
          }
        ]
        
        this.menuConfig = allMenus
        this.updateVisibleMenus()
      },
      
      // 更新可见菜单
      updateVisibleMenus() {
        this.visibleMenus = this.menuConfig.filter(menu => {
          // 超管可以看到所有菜单
          if (this.hasRole('admin')) {
            return true
          }
          
          // 检查菜单的角色限制
          if (menu.roles.includes('all')) {
            return true
          }
          
          // 检查用户是否有对应角色
          return menu.roles.some(role => this.hasRole(role))
        })
      },
      
      // 处理菜单点击
      handleMenuClick(menu) {
        if (menu.action && this[menu.action]) {
          this[menu.action]()
        } else {
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          })
        }
      },
      
      // 轮播图点击
      async clickBannerItem(item) {
        // 统计点击数
        if (item.bannerId) {
          try {
            await clickBanner(item.bannerId)
          } catch (error) {
            console.error('点击统计失败:', error)
          }
        }
        
        // 跳转链接
        if (item.linkUrl) {
          uni.navigateTo({
            url: item.linkUrl
          })
        } else {
          console.log('轮播图点击:', item.title || item.content)
        }
      },
      changeSwiper(e) {
        this.current = e.detail.current
      },
      changeBusinessGrid(e) {
        console.log('点击了业务功能：', e.detail.index)
        const index = e.detail.index
        switch(index) {
          case 'appointment':
            // 跳转到预约申请页面（先跳转到食用农产品预约）
            uni.navigateTo({
              url: '/pages/appointment/food'
            })
            break
          case 'scan':
            // 调用扫码功能
            this.handleScan()
            break
          case 'records':
            // 跳转到预约记录
            uni.navigateTo({
              url: '/pages/appointment/record'
            })
            break
          case 'supplier':
            // 跳转到供货商管理
            uni.navigateTo({
              url: '/pages/supplier/list'
            })
            break
          case 'goods':
          case 'statistics':
            this.$modal.showToast('功能开发中~')
            break
          default:
            break
        }
      },
      changeGrid(e) {
        this.$modal.showToast('模块建设中~')
      },
      
      // 跳转到预约申请
      goToAppointment() {
        console.log('跳转到预约管理')
        // 根据角色跳转到不同页面
        const roles = this.userRoles || []
        
        // 商户角色跳转到预约类型选择页面
        if (roles.includes('merchant')) {
          // 商户看到"预约管理"应该跳转到选择预约类型页面
          uni.navigateTo({
            url: '/pages/appointment/index'  // 预约类型选择页面
          })
        } 
        // 审核员角色跳转到审核管理页面
        else if (roles.includes('market_safety_officer')) {
          uni.navigateTo({
            url: '/pages/audit/list'  // 审核管理页面
          })
        }
        // 入场核验员角色跳转到入场核验页面
        else if (roles.includes('entry_checker')) {
          uni.navigateTo({
            url: '/pages/check/entry'  // 入场核验页面
          })
        }
        // 抽验员角色跳转到抽检任务列表页面
        else if (roles.includes('inspector')) {
          uni.navigateTo({
            url: '/pages/check/tasks'  // 抽检任务列表页面
          })
        }
        // 默认跳转到预约记录页面
        else {
          uni.navigateTo({
            url: '/pages/appointment/record'
          })
        }
      },
      // 跳转到预约记录
      goToRecords() {
        console.log('跳转到预约记录')
        uni.navigateTo({
          url: '/pages/appointment/record'
        })
      },
      // 跳转到供货商管理
      goToSupplier() {
        console.log('跳转到供货商管理')
        uni.navigateTo({
          url: '/pages/supplier/list'
        })
      },
      
      // 跳转到商品管理
      goToGoods() {
        uni.showToast({
          title: '商品管理功能开发中',
          icon: 'none'
        })
      },
      
      // 跳转到预约审核
      goToAudit() {
        uni.navigateTo({
          url: '/pages/audit/list'
        })
      },
      
      // 跳转到抽检管理
      goToInspection() {
        uni.navigateTo({
          url: '/pages/check/tasks'
        })
      },
      
      // 跳转到数据统计
      goToStatistics() {
        uni.showToast({
          title: '统计功能开发中',
          icon: 'none'
        })
      },
      
      // 跳转到公告管理
      goToNotice() {
        uni.navigateTo({
          url: '/pages/notice/list'
        })
      },
      
      // 跳转到商户管理
      goToMerchant() {
        uni.showToast({
          title: '商户管理功能开发中',
          icon: 'none'
        })
      },
      
      // 跳转到查验记录
      goToCheckRecords() {
        uni.navigateTo({
          url: '/pages/check/records'
        })
      },
      
      // 跳转到快速检测
      goToQuickTest() {
        uni.navigateTo({
          url: '/pages/check/quicktest'
        })
      },
      
      // 设置页面标题
      setPageTitle() {
        // 需要先加载角色信息
        setTimeout(() => {
          uni.setNavigationBarTitle({
            title: '法规中心'
          })
        }, 100)
      },
      
      // 加载政策法规
      async loadRegulations() {
        try {
          // 暂时使用模拟数据，后续对接真实接口
          this.regulationList = [
            {
              id: 1,
              title: '农产品质量安全法实施细则',
              publishDate: '2024-01-15',
              source: '农业农村部'
            },
            {
              id: 2,
              title: '食品安全国家标准管理办法',
              publishDate: '2024-01-10',
              source: '市场监管总局'
            },
            {
              id: 3,
              title: '农贸市场管理规范（2024版）',
              publishDate: '2024-01-05',
              source: '商务部'
            }
          ]
        } catch (error) {
          console.error('加载政策法规失败:', error)
        }
      },
      
      // 加载公告
      async loadNotices() {
        try {
          // 暂时使用模拟数据，后续对接真实接口
          this.noticeList = [
            {
              id: 1,
              title: '关于开展春节前食品安全专项检查的通知',
              createTime: '2024-01-20 10:00',
              isNew: true
            },
            {
              id: 2,
              title: '市场休市通知',
              createTime: '2024-01-18 15:30',
              isNew: true
            },
            {
              id: 3,
              title: '食品安全培训通知',
              createTime: '2024-01-15 09:00',
              isNew: false
            }
          ]
        } catch (error) {
          console.error('加载公告失败:', error)
        }
      },
      
      // 查看政策法规详情
      viewRegulation(item) {
        uni.navigateTo({
          url: `/pages/regulation/detail?id=${item.id}`
        })
      },
      
      // 查看公告详情
      viewNotice(item) {
        uni.navigateTo({
          url: `/pages/notice/detail?id=${item.id}`
        })
      },
      
      // 跳转到政策法规列表
      goToRegulations() {
        uni.navigateTo({
          url: '/pages/regulation/list'
        })
      },
      
      // 跳转到公告列表
      goToNoticeList() {
        uni.navigateTo({
          url: '/pages/notice/list'
        })
      },
      
      // 处理扫码
      handleScan() {
        console.log('调用扫码功能')
        uni.scanCode({
          onlyFromCamera: false, // 允许从相册选择
          scanType: ['qrCode'], // 只扫描二维码
          success: (res) => {
            console.log('扫码结果：', res.result)
            // 解析扫码结果
            this.parseScanResult(res.result)
          },
          fail: (err) => {
            console.error('扫码失败：', err)
            uni.showToast({
              title: '扫码失败',
              icon: 'none'
            })
          }
        })
      },
      // 解析扫码结果
      parseScanResult(result) {
        try {
          // 检查是否是预约二维码
          // 支持多种格式：
          // 1. 自定义格式：ZHJG://VERIFY/?applyNo=xxx&applyId=xxx&code=xxx
          // 2. 小程序路径格式：/pages/check/verify?applyNo=xxx&applyId=xxx&code=xxx
          // 3. HTTP URL格式：http://xxx/qr?applyNo=xxx&applyId=xxx&code=xxx
          
          let isValidQr = false
          let queryString = ''
          
          if (result.includes('ZHJG://VERIFY/')) {
            // 自定义格式
            isValidQr = true
            const queryIndex = result.indexOf('?')
            if (queryIndex > -1) {
              queryString = result.substring(queryIndex + 1)
            }
          } else if (result.includes('/pages/check/verify')) {
            // 小程序路径格式
            isValidQr = true
            const queryIndex = result.indexOf('?')
            if (queryIndex > -1) {
              queryString = result.substring(queryIndex + 1)
            }
          } else if (result.includes('/qr?') || result.includes('applyNo=')) {
            // HTTP URL格式或包含预约编号
            isValidQr = true
            const queryIndex = result.indexOf('?')
            if (queryIndex > -1) {
              queryString = result.substring(queryIndex + 1)
            }
          }
          
          if (isValidQr && queryString) {
            const params = {}
            
            // 解析查询参数
            queryString.split('&').forEach(param => {
              const [key, value] = param.split('=')
              if (key && value) {
                params[key] = decodeURIComponent(value)
              }
            })
            
            if (params.applyNo && params.code) {
              // 跳转到验证页面
              uni.navigateTo({
                url: `/pages/check/verify?applyNo=${params.applyNo}&applyId=${params.applyId || ''}&code=${params.code}`
              })
            } else {
              uni.showToast({
                title: '二维码参数不完整',
                icon: 'none'
              })
            }
          } else {
            // 不是预期的二维码格式
            uni.showToast({
              title: '无效的二维码',
              icon: 'none'
            })
          }
        } catch (error) {
          console.error('解析二维码失败：', error)
          uni.showToast({
            title: '二维码解析失败',
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  page {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: linear-gradient(180deg, #E8F5E9 0%, #F1F8E9 100%);
    min-height: 100%;
    height: auto;
    padding-bottom: 120rpx; /* 为自定义tabbar留出空间 */
  }

  view {
    font-size: 14px;
    line-height: inherit;
  }
  /* #endif */

  .work-container {
    background: linear-gradient(180deg, #E8F5E9 0%, #F1F8E9 100%);
    min-height: 100vh;
    padding-bottom: 30rpx;
  }
  
  /* 商户界面样式 */
  .merchant-header {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    padding: 40rpx 30rpx;
    color: #fff;
  }
  
  .header-title {
    display: flex;
    flex-direction: column;
  }
  
  .title-main {
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  
  .title-sub {
    font-size: 26rpx;
    opacity: 0.9;
  }
  
  .merchant-functions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
    padding: 20rpx;
    background: #fff;
    margin-top: -20rpx;
    border-radius: 20rpx 20rpx 0 0;
  }
  
  .function-card {
    display: flex;
    align-items: center;
    gap: 20rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 16rpx;
    transition: all 0.3s;
  }
  
  .function-card:active {
    transform: scale(0.98);
    background: #f0f1f3;
  }
  
  .card-icon {
    width: 80rpx;
    height: 80rpx;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .card-title {
    font-size: 30rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 4rpx;
  }
  
  .card-desc {
    font-size: 24rpx;
    color: #999;
  }
  
  /* 政策法规板块 */
  .regulation-section,
  .notice-section {
    background: #fff;
    margin: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }
  
  .regulation-section .section-header,
  .notice-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
  }
  
  .regulation-section .section-title,
  .notice-section .section-title {
    display: flex;
    align-items: center;
    gap: 10rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .section-more {
    display: flex;
    align-items: center;
    gap: 4rpx;
    font-size: 26rpx;
    color: #999;
  }
  
  .regulation-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
  }
  
  .regulation-item {
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 12rpx;
    transition: all 0.3s;
  }
  
  .regulation-item:active {
    background: #f0f1f3;
  }
  
  .regulation-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }
  
  .regulation-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  
  .regulation-date {
    font-size: 24rpx;
    color: #999;
  }
  
  /* 公告板块 */
  .notice-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }
  
  .notice-item {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 20rpx;
    background: #fffbe6;
    border-radius: 12rpx;
    border-left: 4rpx solid #faad14;
    position: relative;
  }
  
  .notice-tag {
    position: absolute;
    top: 10rpx;
    right: 10rpx;
    padding: 4rpx 12rpx;
    background: linear-gradient(135deg, #ff4d4f, #ff7875);
    color: #fff;
    font-size: 20rpx;
    border-radius: 20rpx;
    font-weight: 500;
  }
  
  .notice-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }
  
  .notice-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
    padding-right: 60rpx;
  }
  
  .notice-time {
    font-size: 24rpx;
    color: #999;
  }

  /* 轮播图优化 */
  .uni-swiper-dot-box {
    margin: 20rpx;
  }

  .swiper-box {
    height: 380rpx;
    margin: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 380rpx;
  }

  .swiper-item image {
    width: 100%;
    height: 100%;
  }

  /* 功能区块样式 */
  .function-section {
    margin: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .section-title {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }

  .title-dot {
    width: 8rpx;
    height: 32rpx;
    background: #1890ff;
    border-radius: 4rpx;
    margin-right: 16rpx;
  }

  .section-more {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #999;
  }

  /* 业务功能网格 */
  .function-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10rpx;
  }

  .function-item {
    width: calc(25% - 20rpx);
    margin: 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    transition: all 0.3s;
  }

  .function-item:active {
    transform: scale(0.95);
  }

  .function-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16rpx;
    transition: all 0.3s;
  }

  .function-item:hover .function-icon {
    transform: translateY(-4rpx);
    box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  }

  .function-name {
    font-size: 26rpx;
    color: #333;
    text-align: center;
  }

  /* 系统管理网格 */
  .system-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -8rpx;
  }

  .system-item {
    width: calc(25% - 16rpx);
    margin: 8rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 10rpx;
    background: #f8f0ff;
    border-radius: 12rpx;
    transition: all 0.3s;
  }

  .system-item:active {
    background: #f0e0ff;
    transform: scale(0.95);
  }

  .system-icon {
    width: 80rpx;
    height: 80rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(114, 46, 209, 0.15);
  }

  .system-name {
    font-size: 24rpx;
    color: #722ED1;
    text-align: center;
  }

  /* 空状态优化 */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80rpx 0;
  }

  .empty-image {
    width: 200rpx;
    height: 200rpx;
    opacity: 0.6;
  }

  .empty-text {
    color: #999;
    font-size: 28rpx;
    margin-top: 20rpx;
  }

  @media screen and (min-width: 500px) {
    .function-item {
      width: calc(20% - 20rpx);
    }
    
    .system-item {
      width: calc(20% - 16rpx);
    }
  }
</style>
